<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            width: 100%;
            background: #7e6e48;
        }
        .butterfly {
            position: relative;
            margin-top: 8%;
            width: 40%;
            transform: rotate(-20deg);
        }
        .butterfly > div {
            position: absolute;
        }
        .butterfly img {
            width: 100%;
        }
        .leftwing {
            animation: flap-l 4s cubic-bezier(0.08, 1.47, 0.65, -0.68) infinite;
        }
        .rightwing {
            animation: flap-r 4s cubic-bezier(0.08, 1.47, 0.65, -0.68) infinite;
        }
        .leftwing,
        .rightwing {
            z-index: 1;
        }
        @keyframes flap-l {
            0% {
                transform: rotateY(0deg);
            }
            50% {
                transform: rotateY(80deg);
            }
            100% {
                transform: rotateY(0deg);
            }
        }
        @keyframes flap-r {
            0% {
                transform: rotateY(0deg);
            }
            50% {
                transform: rotateY(-80deg);
            }
            100% {
                transform: rotateY(0deg);
            }
        }
    </style>
</head>
<body>
<div class="butterfly">
    <div class="body">
        <img src="http://wow.techbrood.com/uploads/150301/butterfly3-body.png">
    </div>
    <div class="leftwing">
        <img src="http://wow.techbrood.com/uploads/150301/butterfly3-leftwing.png">
    </div>
    <div class="rightwing">
        <img src="http://wow.techbrood.com/uploads/150301/butterfly3-rightwing.png">
    </div>
</div>
</body>
</html>